<template>
	<view class="box">
		<view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<image class="image1" @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
			<!-- #ifdef APP-PLUS -->
			<image @click="fn" class="image2" src="https://pic.bangbangtongcheng.com/5bfdd20804944e49ac44a6d4acbf1225"
				mode="widthFix" />
			<!-- #endif -->
		</view>
		<view class="tit">{{ datas.title }}</view>
		<view class="shijian">
			<view>{{ datas.updateDate }}</view>
			<view>{{ datas.author }}</view>
			<!-- <view class="guan">关注</view> -->
		</view>
		<view class="xian"></view>
		<scroll-view scroll-y="true" class="scroll-view-wrap" :style="'height: calc(100vh - '+curTop+'px );'">
			<view class="con">
				<!-- #ifdef MP-WEIXIN -->
				<rich-text :nodes="datas.appendix"></rich-text>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<p v-html="datas.appendix"></p>
				<!-- #endif -->
			</view>
		</scroll-view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	//#endif
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				id: "",
				datas: {},
				userInfo: uni.getStorageSync("Pduser"),
				curTop: 200
			};
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"])
		},
		onLoad(options) {
			this.id = options.id;
			this.getDetail();
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		methods: {
			fn() {
				uni.showActionSheet({
					itemList: ["分享到微信好友", "分享到微信朋友圈"],
					success: res => {
						let wsxcene = null;
						if (res.tapIndex == 0) { //分享到好友 可以发送小程序
							wsxcene = "WXSceneSession";
							uni.share({
								provider: "weixin",
								scene: wsxcene,
								type: 5,
								title: this.datas.title,
								imageUrl: this.datas.picturePath,
								miniProgram: {
									id: 'gh_c8b17811efca',
									path: "pages/index/bannerData?id=" + this.datas.id,
									type: 0,
									webUrl: "https://www.bangbangtongcheng.com/conven_web/#/pages/index/bannerData?id=" +
										this.datas.id,
								},
								success: function(res) {
									console.log("success:" + JSON.stringify(res));
								},
								fail: function(err) {
									console.log("fail:" + JSON.stringify(err));
								}
							});
						} else {
							uni.downloadFile({
								url: this.datas.picturePath, //仅为示例，并非真实的资源
								success: (res) => {
									if (res.statusCode === 200) {
										let name = res.tempFilePath.substr(res.tempFilePath
											.lastIndexOf('/') + 1); //截取文件名
										plus.zip.compressImage({
												src: res.tempFilePath, //下载完图片的临时路径
												dst: '_doc/photoData/' + name, //存储压缩完图片的临时路径
												overwrite: true, //再次压缩会覆盖掉上次的目录
												width: '150px', //缩放图片的宽度
												height: '100px', //缩放图片的高度
												quality: 5, //压缩图片质量,值越低,图片占内存越低                
											}, event => { //压缩成功
												wsxcene = "WXSceneTimeline"; //分享到朋友圈 只能H5 或者图片
												uni.share({
													provider: "weixin",
													scene: wsxcene,
													type: 0,
													title: this.datas.title,
													href: "https://www.bangbangtongcheng.com/conven_web/#/pages/index/bannerData?id=" +
														this.datas.id,
													imageUrl: event.target,
													summary: "我正在看，" + this.datas
														.title + "赶紧跟我一起来查看！",
													success: function(res) {
														console.log("success:" +
															JSON.stringify(res)
															);
													},
													fail: function(err) {
														console.log("fail:" + JSON
															.stringify(err));
													}
												});
											},
											error => { //压缩失败
												uni.showToast({
													title: "压缩失败",
													icon: "none"
												});
											});
									}
								}
							});
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			},
			getDetail() {
				let that = this
				this.$myRequest
					.get("/api/mobile/vehicleOwner/getCarouselChartsById", {
						id: this.id
					})
					.then(res => {
						this.datas = res.carouselCharts;
						this.$nextTick(function() {
							uni.createSelectorQuery().in(this).select('.scroll-view-wrap').boundingClientRect(
								result => {
									if (result) {
										that.curTop = result.top
									}
								}).exec();
						})
					});
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.setWxShare(re.data);
					}
				});
			},
			setWxShare(data) {
				let _this = this;
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: [
						"updateAppMessageShareData",
						"updateTimelineShareData",
						"openLocation",
					],
				});
				wxshare.ready(function() {
					//分享给朋友
					wxshare.updateAppMessageShareData({
						title: this.datas.title, // 分享标题
						desc: this.datas.picturePath, // 分享描述
						link: `https://www.bangbangtongcheng.com/conven_web/#/pages/index/bannerData?id=${this.datas.id}`, // 当前页面链接pp
						imgUrl: "https://pic.bangbangtongcheng.com/6a1ff26f7e554c03aef0bdf118e4741a.jpeg", // 分享图标
						success: function() {
							//分享成功回调
						},
						cancel: function() {
							//取消分享回调
						}
					});
					wxshare.updateTimelineShareData({
						title: this.datas.title, // 分享标题
						desc: this.datas.picturePath, // 分享描述
						link: `https://www.bangbangtongcheng.com/conven_web/#/pages/index/bannerData?id=${this.datas.id}`, // 当前页面链接pp
						imgUrl: "https://pic.bangbangtongcheng.com/6a1ff26f7e554c03aef0bdf118e4741a.jpeg", // 分享图标
						success: function() {},
						cancel: function() {}
					});
				});
			},
			onShareAppMessage: function(res) {
				let that = this;
				if (res.from === "menu") {}
				return {
					title: this.datas.title,
					path: "/pages/index/bannerData?id=" + this.datas.id,
					desc: "找车就用帮帮同城",
					imageUrl: "https://pic.bangbangtongcheng.com/6a1ff26f7e554c03aef0bdf118e4741a.jpeg",
				};
			},
			onShareTimeline() {
				return {
					title: this.datas.title,
					path: "/pages/index/bannerData?id=" + this.datas.id,
					imageUrl: "https://pic.bangbangtongcheng.com/6a1ff26f7e554c03aef0bdf118e4741a.jpeg",
				};
			},
		}
	};
</script>

<style lang="less" scoped>
	.box {
		width: 100%;
		min-height: 100vh;
		color: #333;
		background-color: #fff;
	}

	.scroll-view-wrap {
		/* #ifdef MP  */
		height: calc(100vh - env(safe-area-inset-bottom) / 2 - var(--status-bar-height) - 88rpx - 5px - 22px - 176rpx);
		/* #endif */
		/* #ifdef H5 || APP-PULS */
		height: calc(100vh - env(safe-area-inset-bottom) / 2 - var(--status-bar-height) - 88rpx - 5px - 5px - 170rpx);
		/* #endif */
		/* #ifdef APP */
		height: calc(100vh - env(safe-area-inset-bottom) / 2 - var(--status-bar-height) - 88rpx - 5px - 176rpx);
		/* #endif */
	}

	.tou {
		position: relative;
		width: 100%;
		// height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;

		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}

		.image2 {
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			bottom: 16rpx !important;
			// top: 116rpx;
			right: 30rpx;
			/* #ifdef MP-WEIXIN */
			position: initial;
			margin-left: auto;
			margin-right: 200rpx;
			/* #endif */
		}
	}

	.tit {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 40rpx;
		font-size: 34rpx;
		color: #333;
		font-weight: 600;
	}

	.shijian {
		margin-top: 16rpx;
		margin-left: 30rpx;

		view {
			display: inline-block;
			margin-right: 24rpx;
			height: 42rpx;
			line-height: 38rpx;
			font-size: 26rpx;
			color: #666;
		}

		.guan {
			width: 82rpx;
			height: 40rpx;
			border: 1rpx solid #64b6a8;
			text-align: center;
			font-size: 24rpx;
			border-radius: 22rpx;
			color: #64b6a8;
		}
	}

	.xian {
		width: 690rpx;
		height: 36rpx;
		margin-left: 30rpx;
		border-bottom: 2rpx solid #d0d0d0;
	}

	.con {
		padding: 30rpx;
		background: #fff;
	}
</style>